/*
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-16 09:57:28
 * @LastEditors: charles
 * @LastEditTime: 2021-11-16 12:25:04
 */
import {useEffect,useState} from 'react'
import axios from 'axios'
import {Table,Button,Modal,message,Form,Input,Select} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {token} from '../utils/config'
function Article(props){
  console.log('method');
  const [params,setParams] = useState({page:1,pageSize:5})
  const [articleData,setArticleData] = useState({list:[]})
  
  // 初始化查询 
  useEffect(() => {
    loadArticleData();
    return ()=>{
      // cleanup， 闭包

    }
  },[params]);    // 当params更新的时候继续执行副作用

  const loadArticleData =  ()=>{
    let url = "http://121.199.29.84:8002/article/pageQuery"
    axios.get(url,{
      params,
      headers:{
        "Authorization":token
      }
    }).then((resp)=>{
      setArticleData(resp.data.data)
    })
    
  }

  const onPageChangeHandler = (page)=>{
    // 修改参数, 异步操作
    setParams({ ...params, page })
  }
  // 跳转编辑
  const toPublishHandler = ()=>{
    props.history.push("/articlePublish")
  }
  // 跳转到修改
  const toEditHandler = (row)=>{
    // 编程式导航-传参
    props.history.push({
      pathname: "/articlePublish",
      state:row
    })
  }
  const toDelHandler = (row)=>{
    Modal.confirm({
      title: '您是否要删除当前数据?',
      icon: <ExclamationCircleOutlined />,
      content: '如果删除，数据将不可以恢复，请慎重考虑',
      onOk() {
        let url = "http://121.199.29.84:8002/article/deleteById"
        axios.get(url,{
          params:{id:row.id},
          headers:{
            Authorization:token
          }
        }).then(resp => {
          message.success(resp.data.message)
          loadArticleData();
        })
      }
    });
  }
  // 检索
  const searchHandler = (value)=>{
    // 修改params
    setParams({
      ...params,
      ...value
    })
  }
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '发布时间',
      dataIndex: 'publishTime',
      key: 'publishTime',
    },
    {
      title: '阅读次数',
      dataIndex: 'readTimes',
      key: 'readTimes',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title:"操作",
      key:"id",
      align:"center",
      render(row){
        return (
          <div>
            <Button onClick={()=>{
              toEditHandler(row)
            }}>修改</Button> &nbsp;
            <Button type="danger" onClick={()=>{
              toDelHandler(row)
            }}>删除</Button>
          </div>
        )
      }
    }
  ]
  return (
    <div>
      <h2>资讯管理</h2>
      <div style={ {marginBottom:"1em"} }>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          name="basic"
          onFinish={searchHandler}
        >
          <Form.Item
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>

          <Form.Item label="状态" name="status">
            <Select>
              <Select.Option value="未审核">未审核</Select.Option>
              <Select.Option value="审核通过">审核通过</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item >
            <Button type="primary" htmlType="submit">
            搜索
            </Button>
          </Form.Item>
        </Form>
        <Button onClick={toPublishHandler}>发布资讯</Button>
      </div>
      <Table 
        size="small"
        rowKey="id" 
        pagination={
          {
            current:articleData.page,
            pageSize:articleData.pageSize,
            total:articleData.total,
            onChange:onPageChangeHandler
          }
        }
        dataSource={articleData.list} 
        columns={columns}/>
    </div>
  )
}
export default Article;